<template>
  <div class="user-account">
    <el-row>
      <el-col :sm="{offset: 4, span: 6}" :xs="{offset: 2, span: 20}" style="padding: 5px">
        <el-row class="info">
          <el-col :offset="2" :span="20" :xs="{offset: 0, span: 16}">
            账户所属：{{userEmail}}
          </el-col>
          <el-col :offset="2" :span="20" :xs="{offset: 0, span: 8}">
            当前余额：{{userBalance}}
          </el-col>
          <el-col :span="24" class="active">
            <el-button plain @click="drawerShowAct(0)">充值</el-button>
            <el-button plain @click="drawerShowAct(1)">提现</el-button>
          </el-col>
        </el-row>
        <!-- <el-row class="cash-history">
          <div class="ch-title">充值记录</div>
            <el-table size="small" :data="userAccount" stripe style="width: 100%">
              <el-table-column prop="AccountId" label="账单编号" width="80" />
              <el-table-column prop="DValue" label="收支" width="80" />
              <el-table-column label="时间">
                <template #default="scope">
                  {{sToT(scope.row.Created)}}
                </template>
              </el-table-column>
              <el-table-column prop="Balance" label="剩余" width="80" />
            </el-table>
        </el-row> -->
      </el-col>
      <el-col :sm="{offset: 0, span: 10}" :xs="{offset: 2, span: 20}" style="padding: 5px">
        <el-table size="small" :data="userAccount" stripe style="width: 100%">
          <el-table-column prop="AccountId" label="账单编号" width="80" />
          <el-table-column prop="DValue" label="收支" width="80" />
          <el-table-column label="时间">
            <template #default="scope">
              {{sToT(scope.row.Created)}}
            </template>
          </el-table-column>
          <el-table-column prop="Balance" label="剩余" width="80" />
        </el-table>
      </el-col>
    </el-row>
    <el-drawer v-model="inDrawerShow" :direction="'btt'" size="300">
      <template #header>
        <h4>充值</h4>
      </template>
      <template #default>
        <div>
          充值金额：
          <el-input placeholder="请输入非0正整数" v-model.number="count" type="number" style="width: 200px"/>
          <strong style="color: #ff9300">（单位/分）</strong>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick()">取消</el-button>
          <el-button type="primary" @click="cashinAct()">确定</el-button>
        </div>
      </template>
    </el-drawer>
    <el-drawer v-model="outDrawerShow" :direction="'btt'" size="300">
      <template #header>
        <h4>提现</h4>
      </template>
      <template #default>
        <div>
          提现金额：
          <el-input placeholder="请输入非0正整数" v-model.number="count" type="number" style="width: 200px"/>
          <strong style="color: #ff9300">（单位/分）</strong>
        </div>
      </template>
      <template #footer>
        <div style="flex: auto">
          <el-button @click="cancelClick()">取消</el-button>
          <el-button type="primary" @click="cashoutAct()">确定</el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script>
import store from '@/store'
import { account, balance, cashin, cashout, getPaypage } from '../http/api/cash'
import { ElMessage } from 'element-plus'

export default {
  data() {
    return {
      userEmail: null,
      userAccount: [],
      userBalance: null,

      inDrawerShow: false,
      outDrawerShow: false,
      count: null,
    }
  },
  created: function() {
    let that = this
    account()
    .then(res => {
      console.log(res)
      if (res.data.data != null && res.data.data.total > 0)
        that.userAccount = res.data.data.item
    })
    balance()
    .then(res => {
      console.log(res)
      that.userBalance = res.data.data
    })
    this.userEmail = store.getters.info.email
  },
  methods: {
    sToT: function(timeStamp) {
      let d = new Date(timeStamp)
      return d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()
    },
    drawerShowAct: function(type) {
      switch (type) {
      case 0: 
        this.inDrawerShow = true
        break
      case 1: 
        this.outDrawerShow = true
        break
      }
    },
    cashinAct: function() {
      let that = this
      if (this.count != null && this.count > 0) {
        cashin(this.count)
        .then(res => {
              console.log(res)
          if (res.data.code == 1200)
            getPaypage(res.data.data)
            .then(res2 => {
              console.log(res2)
              if (res2.data.code == 1200) {
                window.open(res2.data.data)
                that.inDrawerShow = false
              }
            })
        })
      } else 
        ElMessage({
          showClose: true,
          message: "非法输入",
          type: "error"
        })
    },
    cashoutAct: function() {
      if (this.count != null && this.count > 0) {
        cashout(this.count)
        .then(res => {
          if (res.data.code == 1201) {
            ElMessage({
              showClose: true,
              message: res.data.data,
              type: "error"
            })
          } else if (res.data.code == 1200) {
            ElMessage({
              showClose: true,
              message: "提现发起成功",
              type: "success"
            })
          }
        })
      } else 
        ElMessage({
          showClose: true,
          message: "非法输入",
          type: "error"
        })
    },
    cancelClick: function() {
      this.inDrawerShow = false
      this.outDrawerShow = false
      ElMessage({
        showClose: true,
        type: "info",
        message: "取消"
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .user-account {
    .info {
      background-color: rgba(0, 0, 0, 0.3);
      border-radius: 10px;
      color: white;
      font-size: 13px;
      line-height: 40px;
      padding: 5px;
      .active {
        display: flex;
        flex-direction: row;
        justify-content: space-around;
      }
    }
    // .cash-history {
    //   background-color: rgba(0, 0, 0, 0.3);
    //   border-radius: 10px;
    //   color: white;
    //   padding: 5px;
    //   margin-top: 10px;
    //   .ch-title {
    //     width: 100%;
    //     text-align: center;
    //   }
    // }
  }
</style>